<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <div v-if="!isLogin"><!--当isLogin为true表示登录状态,登录时此div应该不显示 所以需要添加!取反-->
    <a href="">注册</a>
    <!--javascript:void(0)废掉超链接的跳转功能-->
    <a href="javascript:void(0)" @click="login()">登录</a>
  </div>
  <div v-if="isLogin">
    <input type="text" v-model="info">
    <a href="javascript:void(0)" @click="add()">添加</a>
    <a href="javascript:void(0)" @click="logout()">登出</a>
  </div>
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
</div>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      names:["刘备","关羽"],
      isLogin:false,
      info:"",
    },
    methods:{
      login:function () {
        v.isLogin=true;//模拟登陆
      },
      logout:function () {
        v.isLogin=false;//模拟登出
      },
      add:function () {
        v.names.push(v.info);
      }
    }
  })
</script>
</body>
</html>